<template>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="collectionImgs" :index="index" :collection="true">
    </Detail>
    <div class="imgs" v-show="!showDetail">
        <div class="imgNet">
            <ImgList :imgList="collectionImgs" @viewPicture="viewPicture" :column="2"></ImgList>
        </div>
    </div>

    <div class="clear" @click="clearAll" v-show="!showDetail">
        <el-icon>
            <Delete />
        </el-icon>
    </div>
</template>

<script setup lang="ts">
import { settingStore } from '@renderer/store/setting'
import { storeToRefs } from 'pinia'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
import { ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
const { ipcRenderer } = require('electron')
const set = settingStore()
const showDetail = ref(false)
const index = ref(0)
const { collectionImgs } = storeToRefs(set)

const viewPicture = (num: number) => {
    index.value = num
    showDetail.value = true
}

const closePicture = () => {
    showDetail.value = false
}
const clearAll = () => {
    // 弹出确认框
    ElMessageBox.confirm('确定要清空收藏吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 清空收藏
        set.$state.collectionImgs = []
        // 更新本地存储
        ipcRenderer.send('update-storage', JSON.stringify(set.$state))
    }).catch(() => {
        // 取消操作
    })
}

</script>

<style scoped lang="scss">
.imgs {
    width: 100%;
    height: 100vh;
    position: relative;

    .imgNet {
        height: 100vh;
        position: relative;
        @include mixin.scroll_bar();
    }
}

.empy {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.clear {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    background-image: linear-gradient(to right, #0062ff, #33d9b2);
    box-shadow: 0px 0px 10px $primary;

    &:hover {
        animation: textChange 2s ease-in-out infinite;
    }
}

@keyframes textChange {
    0% {
        background-image: linear-gradient(to right, #0062ff, #33d9b2);
    }

    25% {
        background-image: linear-gradient(to bottom, #0062ff, #33d9b2);
    }

    50% {
        background-image: linear-gradient(to left, #0062ff, #33d9b2);
    }

    75% {
        background-image: linear-gradient(to top, #0062ff, #33d9b2);
    }

    100% {
        background-image: linear-gradient(to right, #0062ff, #33d9b2);
    }
}
</style>